<template>
  <a-card :bordered="false">
    <div>
      <a-row :gutter="[16, 16]">
        <a-col :span="6">
          <a-button @click="addAp">
            <a-icon type="plus" />添加位置
          </a-button>
          <a-button v-show="selectedRowKeys.length>0" style="margin-left: 10px;" @click="delAll()">
            <a-icon type="delete" />
            批量删除
          </a-button>

        </a-col>
        <a-col :span="12">

          <a-input-group compact>
            <a-select v-model="name" style="margin-left: 20px;width: 120px;">
              <a-select-option value="name">
                名称
              </a-select-option>
              <a-select-option value="mac">
                mac地址
              </a-select-option>
              <a-select-option value="areaName">
                区域名称
              </a-select-option>
              <a-select-option value="departmentName">
                部门名称
              </a-select-option>
            </a-select>
            <a-input v-model="queryName" style="width: 200px" placeholder="请输入查询信息" />
            <a-button type="primary" @click="isearch">
              <a-icon type="search" />
              搜索
            </a-button>
          </a-input-group>



        </a-col>
        <a-col :span="6">
          <a-button v-show="queryName!=''" type="primary" @click="reset" style="margin-left: 20px;">
            <a-icon type="reload" />
            重置
          </a-button>
        </a-col>
        <a-col :span="24">
          <div class="ant-alert ant-alert-info" style="margin-bottom: 10px;">
            <i class="anticon anticon-info-circle ant-alert-icon">
            </i> 已选择 <a><b>{{ selectedRowKeys.length }}</b></a>项
            <a style="margin-left: 24px" @click="onClearSelected">清空</a>
          </div>
          <a-table :data-source="data" bordered rowKey="id"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, fixed: true, onChange: onSelectChange, type: 'checkbox' }"
            :scroll="{ x: 1250 }" :pagination="ipagination" @change="handleTableChange">
            <a-table-column title="序号" width="80px" align="center">
              <template slot-scope="text, record,index">
                <span>{{ index + 1 }}</span>
              </template>
            </a-table-column>
            <a-table-column title="名称" data-index="name" width="100px" align="center" />
            <a-table-column title="mac地址" width="160px" align="center" data-index="mac">

            </a-table-column>
            <a-table-column title="区域" width="200px" align="center" data-index="areaName">

            </a-table-column>
            <a-table-column title="部门" data-index="departmentName" width="240px" align="center" />
            <a-table-column title="坐标X" data-index="locationX" width="200px" align="center" />
            <a-table-column title="坐标Y" data-index="locationY" width="200px" align="center" />
            <a-table-column title="状态" data-index="status" width="80px" align="center">
              <template slot-scope="text, record,index">
                <a-tag v-if="text==0" color="#f50">
                  冻结
                </a-tag>
                <a-tag v-else color="#87d068">
                  可用
                </a-tag>
              </template>
            </a-table-column>
            <a-table-column title="操作" width="300px" align="center" fixed="right">
              <template slot-scope="text, record,index">
                <a-button type="primary" style="margin-right: 10px" @click="updateModal(record)">
                  修改
                </a-button>
                <a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No"
                  @confirm="confirm(record)" @cancel="cancel">
                  <a-button type="primary" style="margin-right: 10px">
                    删除
                  </a-button>
                </a-popconfirm>
                <a-button type="primary" @click="show(record)">
                  设备分布
                </a-button>
              </template>
            </a-table-column>
          </a-table>
        </a-col>
      </a-row>
      <a-row>

      </a-row>
      <a-modal :title="Title" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk"
        @cancel="handleCancel">
        <a-form-model :model="formData" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="名称">
            <a-input v-model="formData.name" placeholder="请输入名称" />
          </a-form-model-item>
          <a-form-model-item label="mac地址">
            <a-input v-model="formData.mac" placeholder="请输入mac地址" />
          </a-form-model-item>
          <a-form-model-item label="所属区域">
            <a-cascader ref="area" :options="optionsArea" change-on-select @change="onChangeArea" placeholder="请输入所属区域" />
          </a-form-model-item>
          <a-form-model-item label="所属部门">
            <a-cascader ref="dept" :options="optionsDept" change-on-select @change="onChangeDept" placeholder="请输入所属部门" />
          </a-form-model-item>
          <a-form-model-item label="坐标X">
            <a-input v-model="formData.locationX" placeholder="请输入坐标X" />
          </a-form-model-item>
          <a-form-model-item label="坐标Y">
            <a-input v-model="formData.locationY" placeholder="请输入坐标Y" />
          </a-form-model-item>
        </a-form-model>

      </a-modal>
      
    </div>
  </a-card>
</template>

<script>
  import {
    putAction,
    postAction,
    deleteAction,
    getAction
  } from '@/api/manage'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import {
    queryDepartTreeList
  } from '@/api/api'

  export default {
    components: {
      JSelectDepart
    },
    data() {
      return {
        optionsDept: [],
        optionsArea: [{
            value: '中文',
            label: '中文',
            id: '',
            children: [{
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [{
                value: 'xihu',
                label: 'West Lake',
              }, ],
            }, ],
          },
          {
            value: 'jiangsu',
            label: 'Jiangsu',
            children: [{
              value: 'nanjing',
              label: 'Nanjing',
              children: [{
                value: 'zhonghuamen',
                label: 'Zhong Hua Men',
              }, ],
            }, ],
          },
        ],
        name: 'name',
        queryName: '',
        query: {

        },
        labelCol: {
          span: 6
        },
        wrapperCol: {
          span: 14
        },
        confirmLoading: false,
        Title: '',
        // 弹窗开关
        visible: false,
        visible1: false,
        // 分页参数
        ipagination: {
          current: 1,
          pageSize: 3,
          total: 10
        },
        // 复选框数据
        selectedRowKeys: [],
        selectionRows: {},
        // table数据
        data: [{

          "id": "1",
          "name": "aa",
          "mac": "aa",
          "areaId": "ss",
          "areaIds": '',
          "areaName": "fff",
          "departmentId": "aa",
          "departmentIds": '',
          "departmentName": "sss",
          "locationX": "fff",
          "locationY": "fff",
          "status": 0,
          "delFlag": 0,
          "createBy": "ssss",
          "createTime": "2022-06-27 12:21:18",
          "updateBy": "",
          "updateTime": "2022-06-27 12:21:18"
        }],
        formData: {

        },
        url: {
          page: "map-ap/page",
          add: "map-ap/add",
          update: "map-ap/update",
          del: "map-ap/delBatch"
        },
        ids: [],

      }
    },
    methods: {
      delAll() {
        if (this.ids.length > 0) {
          if (confirm("确认删除")) {
            this.delBatch()
          }
        }
      },
      delBatch() {

        console.log(this.ids)
        postAction(this.url.del, this.ids).then(r => {
          if (r.success) {
            alert(r.message)
            this.ipagination.current = 1
            this.loading()
          }
        })
      },
      confirm(r) {
        // console.log(r);
        this.$message.success('Click on Yes');
        this.ids.push(r.id)
        this.delBatch()

      },
      cancel(e) {
        console.log(e);
        this.$message.error('Click on No');
      },

      // 重置
      reset() {
        this.query = {}
        this.queryName = ''
        this.loading()
      },
      onChangeArea(value,selectedOptions){
        this.formData.areaId=''
        this.formData.areaIds=''
        this.formData.areaName=''
        if (selectedOptions.length > 0) {
          for (let i = 0; i < selectedOptions.length; i++) {
            this.formData.areaIds += selectedOptions[i].id + ','
            this.formData.areaId = selectedOptions[selectedOptions.length - 1].id
            this.formData.areaName += selectedOptions[i].value
        
          }
        }
        console.log(this.formData.areaIds)
      },
      onChangeDept(value, selectedOptions) {
        
        this.formData.departmentIds = ''
        this.formData.departmentId = ''
        this.formData.departmentName = ''
        if (selectedOptions.length > 0) {
          for (let i = 0; i < selectedOptions.length; i++) {
            this.formData.departmentIds += selectedOptions[i].id + ','
            this.formData.departmentId = selectedOptions[selectedOptions.length - 1].id
            this.formData.departmentName += selectedOptions[i].value

          }

        }
        
        console.log(this.formData.departmentName)
      },
      
      // 条件搜索
      isearch() {

        this.query[this.name] = this.queryName
        console.log(this.query)
        this.loading()

      },
      // 弹窗取消
      handleCancel() {
        this.visible = false;
        this.formData = {}
        this.$refs.area.sValue=[]
        this.$refs.dept.sValue=[]
      },
      
      // 弹窗确认
      handleOk() {
        console.log(this.formData)
        postAction(this.url.common, this.formData).then(r => {
          if (r.success) {
            alert(r.message)
            this.visible = false;
            this.formData = {}
            this.$refs.area.sValue=[]
            this.$refs.dept.sValue=[]
            this.loading()
          }
        })
        console.log(this.formData)
      },
      // 查看
      show(r) {
        this.$router.push({
            name:'medical-map-equipmentPoints',
            query: {          // 路由携带参数
                'id': r.id,
            }
        })       
      },
      // 添加位置
      addAp() {
        this.visible = true
        this.Title = '添加位置'
        this.url.common = this.url.add
      },
      onClearSelected() {
        this.selectedRowKeys = []
      },
      // 更新数据
      updateModal(record) {
        this.Title = "更新位置"
        this.visible = true
        this.url.common = this.url.update
        this.formData = Object.assign({}, record)
      },
      onSelectChange(selectedRowKeys, selectionRows) {

        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
        this.ids = selectedRowKeys
      },
      // 加载首页
      loading() {
        this.query.current = this.ipagination.current
        this.query.pageSize = this.ipagination.pageSize
        getAction(this.url.page, this.query).then(r => {
          // console.log(r)
          this.data = r.result.records
          this.ipagination.total = r.result.total
        })
      },
      handleTableChange(pagination, filters, sorter) {

        this.ipagination = pagination;
        this.loading();
      },
    },
    created() {
      this.loading()
      getAction("/sys/sysDepart/deptTree").then(r => {
        // console.log(r.result)
        this.optionsDept = r.result
      })
      getAction("/map-ap/areaTree").then(r => {
        // console.log(r.result)
        this.optionsArea = r.result
      })
    }
  }
</script>
